<template>
	<ul>
		<li v-for="it in tablist" :key="it.id" :style='{backgroundImage: "url(" + it.url + ")",backgroundRepeat: "no-repeat",backgroundSize: "100% 100%"}'>
			<p>{{it.txt}}</p>
			<span v-if="it.id==1">个性独创</span>
		</li>
	</ul>
</template>

<script>
	export default{
		name:'Tabs',
		props:['propTabs'],
		data(){
			return{
				tablist:[]
			}
		},
		watch:{
			propTabs(){
				this.tablist=this.propTabs
			}
		}
	}
</script>

<style scoped>
	ul{
		width: 97%;
		height: 3.6rem;
		margin: 0.5rem auto;
	}
	li{
		float: left;
		width: 24.8%;
		margin: 0.1%;
		height: 1.1rem;
		text-align: center;
	}
	li:first-child{
		height: 2.2rem;
	}
	li p{
		font-weight: bold;
		padding-top: 0.4rem;
		padding-bottom: 0.4rem;
	}
	span{
		padding: 0.02rem 0.1rem;
		background: #FFD700;
		border-radius: 2rem;
		font-weight: bold;
	}
</style>
